<template>
  <div class="help">
    <HeaderTop title="Help"></HeaderTop>
    <div class="box" :class="{'active': isVisible1}">
      <div @click="toggle('1')" class="dt">How to repay your loan</div>
      <div v-if="isVisible1" class="dd">
        <p @click="goPage('/help/repaySky')">The Contract Number start with “SKY”.</p>
        <p @click="goPage('/help/repayMsp')">The Contract Number start with “MSP”.</p>
        <p @click="goPage('/help/repaypartner')">Where to find EC-pay (CLIQQ)?</p>
      </div>
    </div>

    <div class="box" :class="{'active': isVisible2}">
      <div @click="toggle('2')" class="dt">How to get your money</div>
      <div v-if="isVisible2" class="dd">
        <p @click="goPage('/help/getmoney')">The Control Number start with “SK”.</p>
        <p @click="goPage('/help/msp/getmoney')">The Control Number start with “MSP”.</p>
      </div>
    </div>

    <div class="box" :class="{'active': isVisible3}">
      <div @click="toggle('3')" class="dt">About review time</div>
      <div v-if="isVisible3" class="dd">
        <p @click="goPage('/help/question?position=review')">How long does it take to review?</p>
        <p @click="goPage('/help/question?position=reply')">I have been applying for a long time, but there is no reply.</p>
        <p @click="goPage('/help/question?position=message')">I accepted the phone comment a long time ago, but I did not receive the result message.</p>
        <p @click="goPage('/help/question?position=final')">I have already reached the final review, but I have not received the loan for several days.</p>
        <p @click="goPage('/help/question?position=replied')">I haven’t replied for such a long time.</p>
      </div>
    </div>

    <div class="box" :class="{'active': isVisible4}">
      <div @click="toggle('4')" class="dt">About loan problem</div>
      <div v-if="isVisible4" class="dd">
        <p @click="goPage('/help/question?position=rejected')">Why am I being rejected?</p>
        <p @click="goPage('/help/question?position=receive')">Why did I receive the loan information, but I did not receive the loan.</p>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from '@/components/header-top'
  export default {
    name: 'help',
    components: {
      HeaderTop
    },
    data () {
      return {
        isVisible1: true,
        isVisible2: true,
        isVisible3: true,
        isVisible4: true,
      };
    },
    methods: {
      goPage(url) {
        this.$router.push(url)
      },
      toggle(position) {
        this['isVisible' + position] = !this['isVisible' + position];
      }
    },
  }
</script>

<style lang="scss">
  @import '~@/assets/scss/function';
  [data-page=help] {
    body {
      background: #f8f8f8;
    }
    .help {
      padding:120px 30px 30px;
      .box {
        width:690px;
        margin: 0 auto 16px auto;
        background:#FFF;
        border-radius:20px;
        padding:0 30px;
        .dt {
          height:124px;
          line-height:124px;
          font-size:32px;
          font-weight:bold;
          color:#333333;
          background: url('~@/assets/imgs/help/icon-down.png') no-repeat right center;
          background-size: 32px 32px;
        }
        .dd {
          font-size:28px;
          color:#EC5958;
          line-height:36px;
          padding: 40px 0;
          p {
            margin:0 0 44px 0;
          }
          p:last-child {
            margin:0px;
          }
        }
      }
      .active {
        margin-bottom:30px;
        .dt {
          border-bottom:1px solid #EEEEEE;
          background: url('~@/assets/imgs/help/icon-up.png') no-repeat right center;
          background-size: 32px 32px;
        }
      }
    }
  }
</style>
